<template>
    <div style="height: 100%; position: relative">
        <el-drawer
            title="新增"
            :visible.sync="show_dialog"
            direction="rtl"
            size="80%"
            custom-class="demo-drawer"
            ref="drawer"
        >
            <div class="demo-drawer__content" ref="content">
				<el-form :model="form" :rules="rules" v-if="show_dialog" ref="editDrawer">
                    <el-form-item label="供应商名称:" :label-width="formLabelWidth" prop="ServiceSuppliersName">
                        <el-input v-model="form.ServiceSuppliersName"></el-input>
                    </el-form-item>
					<el-form-item label="插件ID:" :label-width="formLabelWidth" prop="PluginID">
                        <el-input v-model="form.PluginID"></el-input>
                    </el-form-item>
					<el-form-item label="合包默认单位条数:" :label-width="formLabelWidth" prop="DefaultNumberOfSubcontracts">
                        <el-input v-model="form.DefaultNumberOfSubcontracts"></el-input>
                    </el-form-item>
					<el-form-item label="展示名称:" :label-width="formLabelWidth" prop="SuppliersName">
                        <el-input v-model="form.SuppliersName"></el-input>
                    </el-form-item>
                    <el-form-item label="启用状态:" :label-width="formLabelWidth" prop="ActiveStatus">
                        <el-switch
                            v-model="form.ActiveStatus"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="Open"
                            inactive-value="Close"
                        ></el-switch>
                    </el-form-item>
                </el-form>
            </div>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button
                    type="primary"
                    @click="handleClose"
                    :loading="loading"
					v-show="type!=='show'"
                >{{ loading ? "提交中 ..." : "确 定" }}</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
export default {
    props: ['dialog'],
    data() {
        return {
			loading: false,
			formLabelWidth:'150px',
            show_dialog: false,//弹窗显示
            form: {
				ServiceSuppliersName:'',
				PluginID:'',
				DefaultNumberOfSubcontracts:'',
				SuppliersName:'',
				ActiveStatus:''
			},
			rules: {
                ServiceSuppliersName: [
                    { required: true, message: '供应商名称不能为空', trigger: 'blur' }
				],
				PluginID:[
					{ required: true, message: '插件ID不能为空', trigger: 'blur' }
				],
				SuppliersName:[
					{ required: true, message: '展示名称不能为空', trigger: 'blur' }
				],
				ActiveStatus:[
					{ required: true}
				]
			},
			type:'',
			row: {}
        }
    },
    methods: {
        show_dialog_fn(type,row) {
			this.row = row;
			this.show_dialog = true;
			this.type = type;
			if(type==='add'){
				this.form = {
					ServiceSuppliersName:'',
					PluginID:'',
					DefaultNumberOfSubcontracts:'',
					SuppliersName:'',
					ActiveStatus:''
				};
			}else{
				this.getItemDetail(row.ServiceSuppliersID)
			}
			/* else if(type==='edit'){
				this.editItemDetail(row.ServiceSuppliersID);
			} */
        },
        cancelForm() {
            this.loading = false
            this.show_dialog = false
            clearTimeout(this.timer)
        },
        handleClose() {
			let {ServiceSuppliersName,PluginID,DefaultNumberOfSubcontracts,SuppliersName,ActiveStatus}=this.form;
			let data={
				ServiceSuppliersName,
				PluginID,
				DefaultNumberOfSubcontracts,
				SuppliersName,
				ActiveStatus
			}
			this.$refs.editDrawer.validate(valid=>{
				if (valid) {
					if(this.type==='edit'){
						data.ServiceSuppliersID = this.row.ServiceSuppliersID;
						this.editItemDetail(data);
					}else if(this.type==='add'){
						this.addItemDetail(data);
					}
				} else {
					console.log('error submit!!');
					return false;
				}
			})
			
        },
        getItemDetail(id) {
            this.$http.post(`/admin/dataService/index.php?act=merchantSet&op=getSupply`,{id}).then(res => {
                this.form = res.data;
            }).catch(err => {
                this._message('error', err);
            })
		},
		addItemDetail(data){
			this.$http.post(`/admin/dataService/index.php?act=merchantSet&op=addSupply`,data).then(res => {
				if(res&&res.code==1){
					this.show_dialog=false;
					this.$parent.getListData();
					this.$message.success(res.msg);
					
				}else{
					this.$message.warning(res.msg)
				}
			}).catch(err => {
				this._message('error', err);
			})
		},
		editItemDetail(data) {
			this.$http.post(`/admin/dataService/index.php?act=merchantSet&op=updateSupply`,data).then(res => {
				if(res.code==1){console.log(res.data, 'res.data')
					this.show_dialog=false;
					this.$message.success(res.msg);
					// this.row.ServiceSuppliersName = res.data.ServiceSuppliersName;
					// this.row.PluginID = res.data.PluginID;
					// this.row.DefaultNumberOfSubcontracts = res.data.DefaultNumberOfSubcontracts;
					// this.row.SuppliersName = res.data.SuppliersName;
					// this.row.ActiveStatus = res.data.ActiveStatus;
					this.$parent.getListData();
				}else{
					this.$message.warning(res.msg)
				}
			}).catch(err => {
				this._message('error', err);
			})
        }
    }
}
</script>

<style lang="scss" scoped>
.el-form {
    // width: 560px;
    padding-left: 10px;
}

.el-select /deep/.el-input {
    width: 360px;
}
.plantTable /deep/.el-input {
    width: auto;
}
form /deep/.el-input {
    width: 360px;
}

.demo-drawer__content {
    position: absolute;
    top: 0;
    bottom: 60px;
    width: 100%;
    overflow-y: auto;
}

/deep/.el-drawer__body {
    position: absolute;
    top: 77px;
    bottom: 0;
    width: 100%;
    overflow: auto;
    padding-bottom: 60px;
}

.demo-drawer__footer {
    position: absolute;
    bottom: 10px;
    left: 20px;
}

.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader /deep/.el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.row_line {
    border-bottom: 1px dashed #d7d8dc;
}
.goodsInfo {
    display: flex;
    align-items: center;
}
</style>
